<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    {{message}}
    <!-- <p v-bind:title="myTitle" v-bind:id="myId + '-' + 1">{{new Date()}}</p>
    <p>{{foo()}}</p>
    <p>{{Math.random() > 0.5 ? '大于' : '小于'}}</p>
    <p>{{money.toFixed(2)}}</p> -->

    <!-- <p class="demo" :class="{active: isActive}">isActive 为 true 则添加 class active</p>

    <p :class="[activeClass, errorClass]">同时绑定多个 class</p>

    <p :class="[isActive ? 'active' : 'off']">三元</p>

    <p :style="{color: 'red', fontSize: fs + 'px'}">绑定style</p>

    <p v-once>{{message}}</p>

    <p v-text="str"></p>
    <p v-html="str"></p> -->

    <div>
      <!-- <span v-show="isShow">赞</span>
      <span v-show="!isShow">不赞</span> -->

      <!-- <span v-if="isShow">赞</span>
      <span v-if="!isShow">不赞</span> -->
    </div>

    <!-- <div>
      <span v-if="ran > 0.9">介于 0.9 ~ 1</span>
      <span v-else-if="ran > 0.8">介于 0.8 ~ 0.9</span>
      <span v-else-if="ran > 0.5">介于 0.5 ~ 0.8</span>
      <span v-else>小于 0.5</span>
    </div>

    <template v-if="isShow">
      <p>内容1</p>
      <p>内容2</p>
      <p>内容3</p>
    </template>

    <ul>
      <li v-for="(item, index) in listData">{{index}}:{{item}}</li>
    </ul>

    <ul>
      <li v-for="(item, index) in goods" :key="index">
        <span>商品名：{{item.goodsName}}</span>
        <span>价格：{{item.price}}</span>
      </li>
    </ul> -->

    <button v-on:click="sayHi">事件</button>
    <button @click="sayHello('Hello')">一般参数传递</button>
    <button @click="getEvent">事件对象</button>
    <button @click="getMore(123, $event)">事件对象及其他参数</button>

    <input type="text" @keyup.enter="submitText">
    <a href="" @click.prevent="console.log(1)">事件</a>

    <button @click="bar">自定义事件</button>

    <p>
      <button @click="decrement">-</button>
      <button>{{count}}</button>
      <button @click="increment">+</button>
    </p>

    <p>计算属性1：{{reversComputed}}</p>
    <p>计算属性2：{{reversComputed}}</p>
    <p>计算属性3：{{reversComputed}}</p>
    <p>方法1：{{reverseMessage()}}</p>
    <p>方法2：{{reverseMessage()}}</p>
    <p>方法3：{{reverseMessage()}}</p>

    <form>
      <input type="text" v-model="username">

      <input type="radio" v-model="sex" value="1">男
      <input type="radio" v-model="sex" value="2">女

      <input type="checkbox" v-model="favorite" value="跑步">跑步
      <input type="checkbox" v-model="favorite" value="羽毛球">羽毛球
      <input type="checkbox" v-model="favorite" value="篮球">篮球

      <textarea v-model="desc"></textarea>

      <select v-model="city">
        <option value="chengdu">成都</option>
        <option value="beijing">北京</option>
        <option value="chongqing">重庆 </option>
      </select>

      <button type="button" @click="submitInfo">提交</button>
    </form>
  </div>

  <script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app', // 挂载节点
      data: { // 数据 -响应式数据
        username: '',
        sex: '1',
        favorite: [],
        desc: '',
        city: 'chengdu',
        count: 0,
        message: 'Hello World',
        money: 199,
        myTitle: '鼠标放在这里',
        myId: 'item',
        isActive: true,
        activeClass: 'ac1',
        errorClass: 'er1',
        fs: 12,
        str: '<a href="#">超链接</a>',
        isShow: true,
        ran: Math.random(),
        listData: ['a', 'b', 'c'],
        goods: [
          {
            goodsName: '小米手机',
            price: 199.99
          },
          {
            goodsName: '华为手机',
            price: 9999
          }
        ]
      },
      beforeCreate() {
        console.log('beforeCreate')
      },
      created() {
        console.log('created')
      },
      beforeMount() {
        console.log('beforeMount')
      },
      mounted() { // 声明周期，节点挂载完成后，自动触发
        this.$on('myEvent', (num) => {
          console.log(num)
        })
        console.log('mounted')

        let obj = {
          name: 'jack'
        }

        // Object.assign 合并对象，并返回新对象
        // let newObj = Object.assign({}, obj, { age: 18, name: 'john' });
        let newObj = {
          ...obj,
          age: 18
        }
        console.log(obj, newObj)
      },
      beforeUpdate() {
        console.log('beforeUpdate')
      },
      updated() {
        console.log('updated')
      },
      computed: {
        reversComputed() {
          console.log('这是计算属性');
          return this.message.split('').reverse().join('')
        }
      },
      watch: {
        message(newValue, oldValue) {
          console.log('属性值发生改变了：', newValue, oldValue);
        }
      },
      methods: { // 自定义函数
        submitInfo() {
          console.log(this.username);
          console.log(this.sex);
          console.log(this.favorite);
          console.log(this.desc);
          console.log(this.city);
        },
        reverseMessage() {
          console.log('这是方法，方法调用一次就会执行一次函数');
          return this.message.split('').reverse().join('')
        },
        foo() {
          return 1;
        },
        sayHi() {
          console.log('Hi');
        },
        sayHello(str) {
          console.log(str);
        },
        getEvent(e) {
          console.log(e);
        },
        getMore(num, e) {
          console.log(num, e)
        },
        submitText() {
          console.log('您按下了回车键');
        },
        bar() {
          this.$emit('myEvent', 123);
        },
        decrement() {
          this.count = this.count - 1;
        },
        increment() {
          this.count = this.count + 1;
        },
      }
    });
  </script>
</body>

</html>